<template>
    <div class="home">
        <button @click="drawPolygon">绘制多边形</button>
        <button @click="start">运行</button>
        <div id="container"></div>
    </div>
</template>

<script>
import {initMap, loadMap} from "@/utils/map";

export default {
    name: 'HomeView',
    components: {},
    methods: {
        initMap() {
            loadMap().then((AMap) => {
                this.map = initMap(AMap, "container")
                this.mouseTool = new AMap.MouseTool(this.map)
                this.addMark(AMap)
                this.trackPlayback(AMap)
            }).catch(e => {
                console.log(e);
            })
        },
        addMark(AMap) {
            var label = {
                offset: new AMap.Pixel(-10, 30), //修改label相对于marker的位置
                content: "<div>123</div>"
            };
            const marker = new AMap.Marker({
                position: new AMap.LngLat(114.612663, 38.014122),   // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
                title: '天亮教育',
                label: label
                // content:`<div style="color:red">da</div>`
            });

            // 将创建的点标记添加到已有的地图实例：
            this.map.add(marker)
        },
        drawPolygon() {
            this.mouseTool.polygon({
                strokeColor: "#FF33FF",
                // strokeOpacity: 1,
                strokeWeight: 6,
                strokeOpacity: 0.2,
                fillColor: '#1791fc',
                fillOpacity: 0.4,
                // 线样式还支持 'dashed'
                strokeStyle: "solid",
                // strokeStyle是dashed时有效
                // strokeDasharray: [30,10],
            })
        },
        trackPlayback(AMap) {
            var startIcon = new AMap.Icon({
                // 图标尺寸
                size: new AMap.Size(20, 40),
                // 图标的取图地址
                image: 'https://a.amap.com/jsapi_demos/static/demo-center-v2/car.png',
                // 图标所用图片大小
                imageSize: new AMap.Size(20, 40),
                // 图标取图偏移量
                imageOffset: new AMap.Pixel(0, 0)
            });
            const marker = new AMap.Marker({
                map: this.map,
                position: [114.525632, 38.022504],
                icon: startIcon,
                offset: new AMap.Pixel(-13, -26),
            });

            this.lineArr = [
                [114.525632, 38.022504],
                [114.533185, 38.022301],
                [114.5331, 38.035485],
                [114.511728, 38.035688],
                [114.511985, 38.043462]
            ];

            new AMap.Polyline({
                map: this.map,
                path: this.lineArr,
                showDir: true,
                strokeColor: "#28F",  //线颜色
                // strokeOpacity: 1,     //线透明度
                strokeWeight: 6,      //线宽
                // strokeStyle: "solid"  //线样式
            });

            const passedPolyline = new AMap.Polyline({
                map: this.map,
                strokeColor: "#AF5",  //线颜色
                strokeWeight: 6,      //线宽
            });

            marker.on('moving', (e) => {
                passedPolyline.setPath(e.passedPath);
                this.map.setCenter(e.target.getPosition(), true)
            });

            this.map.setFitView();
            this.marker = marker
        },

        start() {
            this.marker.moveAlong(this.lineArr, {
                // 每一段的时长
                // duration: 1000,//可根据实际采集时间间隔设置
                speed: 2000,
                // JSAPI2.0 是否延道路自动设置角度在 moveAlong 里设置
                autoRotation: true,
            });
            // this.marker.moveAlong(this.lineArr, 1000000);
        },
    },
    mounted() {
        //DOM初始化完成进行地图初始化
        this.initMap();
    }
}
</script>


<style lang="less">
#container {
  padding: 0px;
  margin: 0px;
  width: 100%;
  height: 800px;
}

/deep/ .content-window-card {
  position: relative;
  box-shadow: none;
  bottom: 0;
  left: 0;
  width: auto;
  padding: 0;
}

.content-window-card p {
  height: 2rem;
}

.custom-info {
  border: solid 1px silver;
}

div.info-top {
  position: relative;
  background: none repeat scroll 0 0 #F9F9F9;
  border-bottom: 1px solid #CCC;
  border-radius: 5px 5px 0 0;
}

div.info-top div {
  display: inline-block;
  color: #333333;
  font-size: 14px;
  font-weight: bold;
  line-height: 31px;
  padding: 0 10px;
}

div.info-top img {
  position: absolute;
  top: 10px;
  right: 10px;
  transition-duration: 0.25s;
}

div.info-top img:hover {
  box-shadow: 0px 0px 5px #000;
}

div.info-middle {
  font-size: 12px;
  padding: 10px 6px;
  line-height: 20px;
}

div.info-bottom {
  height: 0px;
  width: 100%;
  clear: both;
  text-align: center;
}

div.info-bottom img {
  position: relative;
  z-index: 104;
}

span {
  margin-left: 5px;
  font-size: 11px;
}

.info-middle img {
  float: left;
  margin-right: 6px;
}

</style>